<template>

  <div>
    <el-row :gutter="15">

      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">

        <el-col :span="24" class="card-box">
          <el-card >
            <div slot="header" class="clearfix">
              <span>基础信息</span>
            </div>
            <div>
              <el-col :span="12">
                <el-form-item label="员工姓名" prop="employeeName">
                  <el-input v-model="formData.employeeName" placeholder="员工姓名" clearable :readonly="true"
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="岗位" prop="jobName">
                  <el-input v-model="formData.jobName" placeholder="请输入岗位" clearable :readonly="true"
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="绩效考核月" prop="performanceDate">
                  <el-date-picker type="month" v-model="formData.performanceDate" format="yyyy-MM"
                                  value-format="yyyy-MM" :style="{width: '100%'}" placeholder="请选择日期选择" clearable
                                  :readonly="true">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </div>
          </el-card>
        </el-col>

        <el-col :span="24" class="card-box">
          <el-col :span="16">
            <el-card >
              <div slot="header" class="clearfix">
                <span>绩效填报</span>
              </div>

              <el-col :span="24" class="card-box">
                <el-card shadow="always">
                  <el-col :span="23">
                    <el-form-item label="建设运营情况" prop="constructionOperationDetails">
                      <el-input v-model="formData.constructionOperationDetails" type="textarea" placeholder="请输入内容"
                                :autosize="{minRows: 10, maxRows: 30}" :style="{width: '100%'}"
                                :readonly="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-card>
              </el-col>

              <el-col :span="24" class="card-box">
                <el-card shadow="always">
                  <el-col :span="23">
                    <el-form-item label="业务专项工作" prop="specialWork">
                      <el-input v-model="formData.specialWork" type="textarea" placeholder="请输入内容"
                                :autosize="{minRows: 10, maxRows: 30}" :style="{width: '100%'}"
                                :readonly="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-card>
              </el-col>

              <el-col :span="24" class="card-box">
                <el-card shadow="always">
                  <el-col :span="23">
                    <el-form-item label="安全运维工作" prop="safetyOperation">
                      <el-input v-model="formData.safetyOperation" type="textarea" placeholder="请输入内容"
                                :autosize="{minRows: 10, maxRows: 30}" :style="{width: '100%'}"
                                :readonly="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-card>
              </el-col>
              <el-col :span="24" class="card-box">
                <el-card shadow="always">
                  <el-col :span="23">
                    <el-form-item label="加分项" prop="addingScoreItems">
                      <el-input v-model="formData.addingScoreItems" type="textarea" placeholder="请输入内容"
                                :autosize="{minRows: 10, maxRows: 30}" :style="{width: '100%'}"
                                :readonly="true"></el-input>
                    </el-form-item>
                  </el-col>
                </el-card>
              </el-col>


            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div slot="header" class="clearfix">
                <span>绩效小组建议</span>
              </div>
              <el-col :span="24" class="card-box">
                <el-card shadow="always">
                  <el-col :span="23">
                    <el-form-item label="月度工作绩效小组建议" prop="taskGroupOpinion">
                      <el-input v-model="formData.taskGroupOpinion" type="textarea" placeholder="请输入内容"
                                :autosize="{minRows: 10, maxRows: 30}" :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                </el-card>
              </el-col>
              <el-col :span="24" class="card-box">
                <el-card shadow="always">
                  <el-col :span="23">
                    <el-form-item label="加分项绩效小组建议" prop="itemGroupOpinion">
                      <el-input v-model="formData.itemGroupOpinion" type="textarea" placeholder="请输入内容"
                                :autosize="{minRows: 10, maxRows: 30}" :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                </el-card>
              </el-col>
              <el-col :span="24">
                <el-form label-width="100px">
                  <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
                    <el-button type="primary" @click="submitForm()">提交</el-button>
                    <el-button @click="close()">返回</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-card>
          </el-col>
        </el-col>





      </el-form>
    </el-row>
  </div>
</template>
<script>
import { getUserProfile } from "@/api/system/user";
import { addMonthlyList, getMonthly, updateGroupMonthly, delMonthly, addMonthly, updateMonthly } from "@/api/system/monthly";

export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        id: null,
        employeeId: null,
        employeeName: null,
        jobId: null,
        jobName: null,
        stateId: null,
        stateName: null,
        constructionOperationDetails: null,
        specialWork: null,
        safetyOperation: null,
        taskGroupOpinion: null,
        totalScore: null,
        taskManagerScore: null,
        taskManagerOpinion: null,
        addingScoreItems: null,
        itemGroupOpinion: null,
        itemManagerScore: null,
        itemManagerOpinion: null,
        performanceDate: null,
        createTime: null,
        creatorId: null,
        creatorName: null,
        groupMemberId: null,
        groupMemberName: null,
        groupMemberTime: null,
        managerId: null,
        managerName: null,
        managerDatetime: null,
        performanceScore: null,
        deptId: null,
        deptName: null
      },
      rules: {}
    }


  },
  computed: {},
  watch: {},
  created() {
    let op = this.$route.query.op;
    let id = this.$route.query.id;

    this.handleUpdate(id);

  },
  mounted() {},
  methods: {
    reset() {
      this.form = {
        id: null,
        employeeId: null,
        employeeName: null,
        jobId: null,
        jobName: null,
        stateId: null,
        stateName: null,
        constructionOperationDetails: null,
        specialWork: null,
        safetyOperation: null,
        taskGroupOpinion: null,
        totalScore: null,
        taskManagerScore: null,
        taskManagerOpinion: null,
        addingScoreItems: null,
        itemGroupOpinion: null,
        itemManagerScore: null,
        itemManagerOpinion: null,
        performanceDate: null,
        createTime: null,
        creatorId: null,
        creatorName: null,
        groupMemberId: null,
        groupMemberName: null,
        groupMemberTime: null,
        managerId: null,
        managerName: null,
        managerDatetime: null,
        performanceScore: null,
        deptId: null,
        deptName: null
      };
      this.resetForm("formData");
    },
    getAddMonthlyList() {
      addMonthlyList().then(response => {
        this.formData = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
        this.$modal.confirm('是否确认对员工【'+ this.formData.employeeName +'】的绩效评分？').then(function() {
          console.log("in update")
           return updateGroupMonthly(this.formData);
        }).then(() => {
          this.$modal.msgSuccess("绩效小组评分成功");
        }).catch(() => {});
    },

    handleUpdate(id) {
      this.reset();
      getMonthly(id).then(response => {
        this.formData = response.data;
        //this.open = true;
        //this.title = "修改月度绩效管理";
      });
    },
  }
}

</script>
<style>



</style>
